<template>
  <el-sub-menu v-if="item.children&&item.children.length" :index="item.path">
    <template #title>
      {{ item.title }}
    </template>
    <menu-item v-for="item of item.children" :item="item"></menu-item>
  </el-sub-menu>
  <el-menu-item v-else :index="item.path" @click="onGo(item)">
    {{ item.title }}
  </el-menu-item>
</template>
<script setup>
import router from '../router';
defineProps({
  item: Object
});
const onGo = item => {
  router.push(item.path);
};
</script>
<style lang="scss">
.el-menu-item, .el-sub-menu__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 45px;
  line-height: 45px;
}
</style>